<template>
	<view class="homebox">
		<!-- 		<view class="czname">
			测站信息
		</view> -->
		<!-- 断面列表 -->
		<u-sticky>
			<view class="che_box" hover-class="che_box_av" @click="cheshowFn">
				选择断面参数
			</view>
		</u-sticky>
		<view class="box_lo">
			<view class="czinput">
				<view class="lebox">
					名称：
				</view>
				<view class="leboxinput">
					<view class="">
						<uni-easyinput v-model="cezhanitem.name" placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					编码：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.nub" placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view>
			<view class="hetop">
				<view class="titleclass">
					定位点
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					经度：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.lot" type='digit' placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					纬度：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.lat" type='digit' placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view>
			<view class="button">
				<u-button type="success" shape="circle" text="点击获取经纬度" @click="loalonFn"></u-button>
			</view>
			<view class="hetop">
				<view class="titleclass">
					测段参数
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					断面形状：
				</view>
				<view class="">
					<uni-data-checkbox v-model="cezhanitem.xingzhuang" :localdata="range"></uni-data-checkbox>
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					渠底宽度：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.qudikuandu" type='digit' placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view>
			<!-- 			<view class="czinput">
				<view class="lebox">
					设计水深：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.shejishuishen" type='digit'
							placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					设计流量：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.shejiliuliang" type='digit'
							placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view> -->
			<!-- 			<view class="czinput">
				<view class="lebox">
					上限水深：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.shangxianshuishen" type='digit'
							placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view> -->
			<!-- 			<view class="czinput">
				<view class="lebox">
					下限水深：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.xiaxianshuishen" type='digit'
							placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view> -->
			<!-- 			<view class="czinput">
				<view class="lebox">
					渠底纵坡：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.qudizongpo" type='digit' placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view> -->
			<!-- 			<view class="czinput">
				<view class="lebox">
					渠坡糙率：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.qupocaolv" type='digit' placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view> -->
			<view class="hetop">
				<view class="titleclass">
					边坡角度
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					左坡角：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.lSA" type='digit' placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					右坡角：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.rSA" type='digit' placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view>
			<view class="hetop">
				<view class="titleclass">
					标准测法
				</view>
			</view>

			<!-- 			<view class="czinput">
				<view class="lebox">
					测线布置：
				</view>
				<view class="">
					<uni-data-checkbox v-model="cezhanitem.cexianbuzhi" :localdata="range2"></uni-data-checkbox>
				</view>
			</view> -->
			<view class="czinput">
				<view class="lebox">
					默认测法：
				</view>
				<view class="">
					<uni-data-checkbox v-model="cezhanitem.morencefa" :localdata="range3"></uni-data-checkbox>
				</view>
			</view>
			<view class="hetop">
				<view class="titleclass">
					边坡系数
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					左岸系数：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.kL" type='digit' placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					右岸系数：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.kR" type='digit' placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view>
			<!-- 			<view class="czinput">
				<view class="lebox" style="width: 260rpx">
					水位修正：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.zijishuishenxiuzheng" type='digit'
							placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view> -->
			<view class="hetop">
				<view class="titleclass">
					单条测线
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					测线条数：
				</view>
				<view class="">
					<view class="" style="width: 300rpx;">
						<uni-data-select :clear="false" v-model="cezhanitem.measurementModeList[1].value.length"
							:localdata="range1" placeholder="请选择测线条数" @change="change1"></uni-data-select>
					</view>
				</view>
			</view>
			<view class="" style="height: 30rpx;">

			</view>
			<view class="qicebox">
				<view class="qicedian">
					测线编号
				</view>
				<view class="qicedian">
					水平坐标
				</view>
				<view class="qicedian">
					行走距离
				</view>
				<view class="qicedian">
					架空高度
				</view>
			</view>
			<view class="qicebox" v-for="(item,index) in cezhanitem.measurementModeList[1].value" :key="index">
				<view class="qicinput">
					{{item.id}}
				</view>
				<view class="qicinput">
					<!-- {{item.zuobiao}} -->
					<u--input v-model="item.cR" placeholder="输入内容" border="none" type="digit"></u--input>
				</view>
				<view class="qicinput">
					<!-- {{item.xishu}} -->
					<u--input v-model="item.zJ" placeholder="输入内容" border="none" type="digit"></u--input>
				</view>
				<view class="qicinput">
					<!-- {{item.xishu}} -->
					<u--input v-model="item.bC" placeholder="输入内容" border="none" type="digit"></u--input>
				</view>
			</view>
			<view class="" style="color: #144892;">
				架空高度为上止点时铅鱼底部到渠底的高度
			</view>
			<view class="czinput">
				<view class="" style="width: 350rpx;">
					流速仪距铅鱼底：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.measurementModeList[0].value" type='digit'
							placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view>
			<!-- 			<view class="czinput">
				<view class="lebox">
					水量系数：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.shuiliangxishu" type='digit'
							placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view> -->
			<!-- 			<view class="hetop">
				<view class="titleclass">
					边坡测线流速系数
				</view>
			</view> -->
			<!-- 			<view class="czinput">
				<view class="lebox">
					右坡测线系数：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.vmL" type='digit' placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view> -->
			<!-- 			<view class="czinput">
				<view class="lebox">
					左坡测线系数：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.vmR" type='digit' placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view> -->
			<view class="" style="height: 100rpx;">
				<u-button @click="saveCezhan" type="primary" shape="circle" text="保存到本地"></u-button>
			</view>
			<view class="" style="height: 100rpx;">

			</view>
		</view>
		<!-- 抽屉断面信息列表 -->
		<uni-drawer ref="showRight" mode="left" :mask-click="false" :width="350" maskClick>
			<scroll-view style="height: 100%;" scroll-y="true">
				<view class="">
					<!-- 标题 -->
					<uni-section class="mb-10" title="选择测站" titleFontSize="20px">
						<template v-slot:decoration>
							<view class="decoration"></view>
						</template>
					</uni-section>
					<!-- 数据内容 -->
					<view class="dataContent">
						<uni-data-checkbox v-model="cheZhanValue" :localdata="cheZhanRange" mode="tag"
							selectedColor="#3c55a6" @change="cheZHANchange"></uni-data-checkbox>
					</view>
					<!-- 标题 -->
					<uni-section class="mb-10" title="选择测段" titleFontSize="20px">
						<template v-slot:decoration>
							<view class="decoration"></view>
						</template>
					</uni-section>
					<!-- 数据内容 -->
					<view class="dataContent">
						<uni-data-checkbox v-model="cheDuanValue" :localdata="cheDuanRange" mode="tag"
							selectedColor="#3c55a6" @change="cheDUANchange"></uni-data-checkbox>
					</view>
					<!-- 标题 -->
					<uni-section class="mb-10" title="选择测量类型" titleFontSize="20px">
						<template v-slot:decoration>
							<view class="decoration"></view>
						</template>
					</uni-section>
					<!-- 数据内容 -->
					<view class="dataContent">
						<uni-data-checkbox v-model="styValue" :localdata="styRange" mode="tag" selectedColor="#3c55a6"
							@change="stychange"></uni-data-checkbox>
					</view>
					<!-- 标题 -->
					<uni-section class="mb-10" title="选择断面参数" titleFontSize="20px">
						<template v-slot:decoration>
							<view class="decoration"></view>
						</template>
					</uni-section>
					<view class="con_list" v-for="(i,index) in duanMianList" :key="index" hover-class="con_list_av" @click="duanMianFn(i.id)">
						<view class="con_a">
							{{i.name}}
						</view>
						<view class="con_f">
							<view class="">
								<view class="con_b">
									{{i.cexiantiaoshu}}条测线
								</view>
								<view class="con_b">
									{{i.morencefa}}点法
								</view>
							</view>
							<u-icon name="arrow-right" color="#b8b8b8"></u-icon>
						</view>

					</view>
					<!-- 确定 -->
					<view class="" style="padding: 20rpx;">
						<u-button @click="closeDrawer" type="success" shape="circle" color="#144892"
							text="取消"></u-button>
					</view>

				</view>
			</scroll-view>
		</uni-drawer>
		<!-- 断面参数列表 -->
		<!-- 		<u-picker :show="cheshow" :defaultIndex="[0,0]" :columns="columns" keyName="label" @confirm="confirmuploadFn"
			@cancel="canceluploadFn" itemHeight="50"></u-picker> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				styValue: 0,
				styRange: [{
						text: '索道式测流',
						value: 1
					},
					{
						text: '轨道式测流',
						value: 2
					},
					{
						text: '手持杆测流',
						value: 3
					},
					{
						text: '多普勒测流船',
						value: 4
					},
					{
						text: '时差法流量计',
						value: 5
					},
				],
				duanMianList: [],
				cheZhanValue: 0,
				cheZhanRange: [],
				cheDuanValue: 0,
				cheDuanRange: [],
				cheshow: false,
				columns: [],
				buttext: '选择测流车',
				cezhanitem: {
					measurementModeList: [{
						value: '0'
					}, {
						value: []
					}, {
						value: []
					}]
				},
				range: [{
					text: '梯形',
					value: 0
				}, {
					text: '矩形',
					value: 1
				}, ],
				range1: [{
						text: '1条测线',
						value: 1
					},
					{
						text: '2条测线',
						value: 2
					},
					{
						text: '3条测线',
						value: 3
					},
					{
						text: '4条测线',
						value: 4
					},
					{
						text: '5条测线',
						value: 5
					},
					{
						text: '6条测线',
						value: 6
					},
					{
						text: '7条测线',
						value: 7
					},
					{
						text: '8条测线',
						value: 8
					},
					{
						text: '9条测线',
						value: 9
					},
				],
				range2: [{
						text: '均匀',
						value: 1
					},
					{
						text: '不均匀',
						value: 2
					}
				],
				range3: [{
						text: '一点法',
						value: 1
					},
					{
						text: '三点法',
						value: 3
					}
				],
				stationList: [],
				InterfaceData: [],
				devId: '',
				measurementModeList: []
			}
		},
		onLoad(option) {
			this.stationProFn()
		},
		onShow() {

		},
		methods: {
			// 测站列表
			cezhanListFn() {
				uni.$u.http.get('/device/survey_station/list', {
					params: {
						"stationType": 0
					}
				}).then(res => {
					console.log('res', res);
					if (res.code == 200) {
						this.cheZhanRange = res.rows.map((i) => {
							return {
								value: i.id,
								text: i.surveyStationName,
							}
						})
					}
				}).catch(err => {
					console.log('错误', err);
				})
			},
			// 选择测站
			cheZHANchange(e) {
				console.log(e);
				this.ceduanListFn(e.detail.value)
			},
			// 测段列表
			ceduanListFn(id) {
				uni.$u.http.get('/device/steadyFlowSection/list', {
					params: {
						"ssId": id
					}
				}).then(res => {
					console.log('res---', res);
					if (res.code == 200) {
						this.cheDuanRange = res.rows.map((i) => {
							return {
								value: i.id,
								text: i.name,
								ssId: i.ssId
							}
						})
					}
				}).catch(err => {
					console.log('错误', err);
				})
			},
			// 选择测段
			cheDUANchange(e) {
				console.log('eeee', e);
				this.duanMianShowFn(e.detail.data.ssId, e.detail.data.value)
			},
			// 选择测量类型
			stychange(e) {
				console.log('类型', e);
				this.styValue = e.detail.value
			},
			// 选择断面参数
			duanMianFn(id){
				if(this.styValue == 0){
					uni.showToast({
						title: '测量类型未选择',
						duration: 2000,
						icon:'error',
						mask:true 
					});
					return
				}
				this.getInfoFn(id,this.styValue)
				// uni.$u.http.get('/device/stationProfile/getInfoPhone', {
				// 	params: {
				// 		"spaType": this.styValue,
				// 		"id": id
				// 	}
				// }).then(res => {
				// 	console.log('断面详情', res);
				// 	if (res.code == 200) {
				// 	}
				// }).catch(err => {
				// 	console.log('错误', err);
				// })
			},
			// 断面信息列表
			duanMianShowFn(ssId, sfsId) {
				uni.$u.http.get('/device/stationProfile/list', {
					params: {
						"ssId": ssId,
						"type": 0,
						"sfsId": sfsId,
					}
				}).then(res => {
					console.log('res+++***', res);
					if (res.code == 200) {
						this.duanMianList = res.rows.map((i) => {
							return {
								name: i.name,
								cexiantiaoshu: i.cexiantiaoshu,
								morencefa: i.morencefa,
								id: i.id
							}
						})
					}
				}).catch(err => {
					console.log('错误', err);
				})
			},
			// 选择断面参数
			chatItemFn(i) {
				console.log('断面参数', i);
			},
			// 选择断面
			cheshowFn() {
				// this.cheshow = true
				this.cezhanListFn()
				this.$refs.showRight.open()
			},
			// 取消
			closeDrawer() {
				this.$refs.showRight.close();
				this.cheZhanValue = 0
				this.cheDuanValue = 0
				this.styValue = 0
			},
			// 选择断面确认
			confirmuploadFn(e) {
				this.devId = e.value[0].id
				this.cheshow = false
				setTimeout(() => {
					this.loalonFn()
				}, 300)
			},
			// 选择断面取消
			canceluploadFn() {
				this.cheshow = false
			},
			loalonFn() {
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						this.cezhanitem.lot = res.longitude
						this.cezhanitem.lat = res.latitude
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
					}
				});

			},
			// 选择测线
			change1(e) {
				this.cezhanitem.cexiantiaoshu = e
				this.cezhanitem.measurementModeList[1].value.length = 0
				for (var i = 0; i < e; i++) {
					this.cezhanitem.measurementModeList[1].value.push({
						id: 1 + i,
						cR: '',
						zJ: '',
						bC: ''
					})
				}
			},
			// 断面信息列表
			stationProFn() {
				uni.$u.http.get('/device/stationProfile/list').then(res => {
					if (res.code == 200) {
						let arrlist = []
						let arrflow = res.rows.map((i) => {
							return {
								label: i.name,
								id: i.id,
							}
						})
						let arrtype = [{
							label: '索道式测流',
							id: 1,
						}, {
							label: '轨道式测流',
							id: 2,
						}, {
							label: '手持杆测流',
							id: 3,
						}, {
							label: '多普勒测流船',
							id: 4,
						}, {
							label: '时差法流量计',
							id: 5,
						}]
						arrlist[0] = arrflow
						arrlist[1] = arrtype
						this.columns = arrlist
					}
				}).catch(err => {
					console.log('错误', err);
				})
			},
			//断面信息详情
			getInfoFn(id, spaType) {
				uni.$u.http.get('/device/stationProfile/getInfoPhone', {
					params: {
						"id": id,
						"spaType": spaType
					}
				}).then(res => {
					console.log('详情',res);
					if (res.code == 200) {
						let str = res.data.measurementModeList[0].configData
						let arrStr = JSON.parse(str)
						let typeArr = []
						this.cezhanitem = res.data

						for (let i = 0; i < arrStr.length; i++) {
							if (arrStr[i].fieldsCode == 'qk') {
								typeArr[0] = arrStr[i]
							} else if (arrStr[i].fieldsCode == 'cexianlist') {
								typeArr[1] = arrStr[i]
							} else if (arrStr[i].fieldsCode == 'signalLimit') {
								typeArr[2] = arrStr[i]
							}
						}
						this.cezhanitem.measurementModeList = typeArr
						this.cezhanitem.cexiantiaoshu = this.cezhanitem.measurementModeList[1].value.length
						console.log('断面-----',this.cezhanitem);
						// 取消
						setTimeout(()=>{
							this.loalonFn()
							this.closeDrawer()
						},0)

					}
				}).catch(err => {
					uni.showToast({
						title: '未查询到数据',
						duration: 1500
					});
					console.log('错误', err);
				})
			},
			// 保存测站信息
			saveCezhan() {
				if (this.cezhanitem.cexiantiaoshu == 0) {
					uni.showToast({
						title: '未选择测线',
						duration: 1500
					});
					return
				}
				let date = Date.parse(new Date())
				this.cezhanitem.cezhanID = date
				let datalist = []
				datalist = this.vuex_saveCezhandata
				datalist.unshift(this.cezhanitem)
				uni.$u.vuex('vuex_saveCezhandata', datalist)
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>
<style scoped lang="scss">
	// 测站数据内容
	.dataContent {
		padding: 0rpx 20rpx 0rpx 20rpx;
	}

	.con_list {
		padding: 10rpx;
		margin: 20rpx;
		border-radius: 30rpx;
		background-color: rgba(106, 113, 138, 0.1);
		border: #000000 solid 1rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.con_a {
			text-align: center;
			font-size: 40rpx;
			color: #000000;
			font-weight: bold;
			width: 500rpx;
		}

		.con_f {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.con_b {
				border-radius: 8rpx;
				padding: 0rpx 10rpx;
				margin: 10rpx;
				background-color: #ffffff;
				font-size: 30rpx;
				color: #000000;
			}
		}

	}

	.con_list_av {
		background-color: rgba(183, 198, 221, 0.8);
	}

	//选择断面列表
	.che_box {
		margin: 0rpx 0rpx 20rpx 0;
		padding: 20rpx;
		text-align: center;
		background-color: #144892;
		color: #fff;
		border-radius: 10rpx;
		font-size: 40rpx;
	}

	.che_box_av {
		background-color: #31475e;
	}

	// 网络列表
	.box_net {
		margin-top: 30rpx;

		.box_t {
			margin-bottom: 20rpx;
			padding: 20rpx;
			border-radius: 20rpx;
			background-color: #f5f7f9;
			border: 5rpx solid #fff;
			box-shadow: 0 0 10rpx 5rpx rgba(183, 198, 221, 0.9);

			.ti {
				text-align: center;
				font-size: 45rpx;
				color: #000000;
			}

			.flx {
				display: flex;
				align-items: center;
				justify-content: space-between;
				line-height: 60rpx;

				.ie {
					color: #444444;
					width: 320rpx;

					.text {
						font-size: 40rpx;
						color: #5b4c95;
						font-weight: bold;
					}

				}
			}
		}
	}

	.titleclass {
		color: #144892;
	}

	.hetop {
		text-align: center;
		line-height: 60rpx;
		background-color: #e8eaec;
		border-radius: 30rpx;
		font-size: 30rpx;
		font-weight: bold;
	}

	.homebox {
		width: 690rpx;
		padding: 0 30rpx;

		.czname {
			display: flex;
			justify-content: center;
			line-height: 100rpx;
			font-size: 40rpx;
			color: #144892;
		}

		.box_lo {
			.czinput {
				font-size: 35rpx;
				padding: 20rpx 20rpx;
				display: flex;
				align-items: center;
				border-radius: 0rpx;
				margin-bottom: 20rpx;

				.lebox {
					width: 250rpx;
				}
			}
		}

		.button {
			padding: 0 30rpx 30rpx 30rpx;
		}

		.qicebox {
			display: flex;
			justify-content: center;
			align-items: center;

			.qicedian {
				width: 200rpx;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				color: #fffcf8;
				// border: #dddcda solid 1rpx;
				background-color: #144892;
				border-radius: 20rpx 20rpx 0 0;
			}

			.qicinput {
				width: 160rpx;
				height: 100rpx;
				padding: 0 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				line-height: 100rpx;
				color: #7e7d7a;
				border: #dddcda solid 1rpx;
				background-color: #ffffff;
			}
		}
	}
	.decoration {
		width: 10rpx;
		height: 40rpx;
		border-radius: 15rpx;
		margin-right: 15rpx;
		background-color: #144892;
	}
</style>
<style>
	page {
		background-color: #f5f7f9;
	}
</style>